<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Landscape</view>
			<view class="tui-page__desc">压屏窗</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto"
				@click="landscapeShow(1)">默认展示</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="landscapeShow(2)">icon位置-右上</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="landscapeShow(3)">icon位置-左上</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto"
				@click="landscapeShow(4)">点击遮罩可关闭</tui-button>
		</view>
		<tui-landscape :show="show" :position="position" :maskClosable="maskClosable" iconLeft="50rpx" iconRight="50rpx" @close="close">
			<image src="https://www.thorui.cn/extend/common/img_invite_3x.png" mode="widthFix" style="width: 600rpx;"/>
		</tui-landscape>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				position: 1,
				maskClosable: false,
				show: false
			}
		},
		methods: {
			landscapeShow(type) {
				this.position = 1;
				this.maskClosable = false;
				if (type == 2) {
					this.position = 2;
				} else if (type == 3) {
					this.position = 3
				} else if (type == 4) {
					this.maskClosable = true;
				}

				setTimeout(() => {
					this.show = true;
				}, 50)
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style>

</style>
